src/hooks/useDebounce.ts (2)

3-10: Update JSDoc to match TypeScript types

The JSDoc parameter types don't match the TypeScript type annotations. The value parameter is typed as string in the implementation but documented as any.

 /**
  * Custom hook to debounce a value.
  *
- * @param {any} value - The value to debounce.
+ * @param {string} value - The value to debounce.
  * @param {number} delay - The debounce delay in milliseconds.
- * @returns {any} - The debounced value.
+ * @returns {string} - The debounced value.
  */

---

1-50: Consider performance implications and provide usage guidance

As this hook is used for search functionality, consider:

1. Document recommended delay values (e.g., 300ms for search, 500ms for other use cases)
2. Add usage examples in comments
3. Consider memoizing the returned value for performance optimization when used with complex components

Add usage documentation:

/**
 * @example
 * // Basic usage with search input
 * const SearchComponent = () => {
 *   const [searchTerm, setSearchTerm] = useState('');
 *   const debouncedSearch = useDebounce(searchTerm, 300);
 *
 *   useEffect(() => {
 *     // Perform search with debouncedSearch
 *   }, [debouncedSearch]);
 *
 *   return <input onChange={(e) => setSearchTerm(e.target.value)} />;
 * };
 */

src/components/Patient/ManagePatients.tsx (2)

752-785: Enhance type safety and internationalization of search options.

Consider the following improvements:

1. Define a proper type for search options instead of inline type assertions
2. Use translation function for labels and placeholders
3. Consider using a more flexible phone number validation approach

Apply this diff to improve the implementation:

+type SearchOptionType = 'text' | 'phone';
+
+interface SearchOption {
+  key: string;
+  label: string;
+  type: SearchOptionType;
+  placeholder: string;
+  value: string;
+  shortcutKey: string;
+}
+
 const searchOptions: SearchOption[] = [
   {
     key: "phone_number",
-    label: "Phone Number",
+    label: t("phone_number"),
     type: "phone",
-    placeholder: "Search_by_phone_number",
+    placeholder: t("search_by_phone_number"),
     value: qParams.phone_number || "",
     shortcutKey: "p",
   },
   // ... similar changes for other options
 ];

---

998-998: Consider using design system tokens for spacing.

Instead of hardcoding padding values, consider using your design system's spacing tokens for better maintainability and consistency.

-className="pb-12"
+className="pb-spacing-12"  // Assuming your design system uses spacing tokens

Configuration used: CodeRabbit UI
Review profile: CHILL

src/components/Common/SearchByMultipleFields.tsx (1)

48-48: Enhance type safety for clearSearch prop

The clearSearch prop type could be more specific and type-safe.

-clearSearch?: { value: boolean; params?: string[] };
+interface ClearSearchConfig {
+  value: boolean;
+  params: string[];
+}
+clearSearch?: ClearSearchConfig;

src/components/Patient/ManagePatients.tsx (1)

757-790: Add type safety to searchOptions array.

Consider defining an interface for the search options and using a const assertion for better type safety:

+interface SearchOption {
+  key: 'phone_number' | 'name' | 'patient_no' | 'emergency_phone_number';
+  label: string;
+  type: 'phone' | 'text';
+  placeholder: string;
+  value: string;
+  shortcutKey: string;
+}

-const searchOptions = [
+const searchOptions: SearchOption[] = [
   {
     key: "phone_number",
     // ... rest of the options
   }
 ] as const;

Configuration used: CodeRabbit UI
Review profile: CHILL

-type EventType = {
-  value: string;
-  target?: { value: string };
-};
+import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";

// For regular inputs
onChange: (e: React.ChangeEvent<HTMLInputElement>) => handleSearchChange(e.target.value)
// For phone input
onChange: (e: FieldChangeEvent<string>) => handleSearchChange(e.value)

-component?: React.ComponentType<HTMLDivElement>;
+component?: React.ComponentType<{ className?: string }>;

 {error && (
   <div className="error-text px-2 mb-1 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
-    {t("invalid_phone_number")}
+    {typeof error === 'string' ? t(error) : t(`invalid_${selectedOption.type}_input`)}
   </div>
 )}

-<span className="flex-1">{t(option.key)}</span>
+<span className="flex-1">{t(option.label)}</span>

-{t(option.key)}
+{t(option.label)}

src/components/Patient/ManagePatients.tsx (2)

757-790: Enhance type safety and internationalization for search options.

Consider these improvements:

1. Define a type for the search options to ensure type safety
2. Use translation keys for labels to support internationalization

+type SearchOptionType = 'text' | 'phone';
+type SearchOption = {
+  key: string;
+  label: string;
+  type: SearchOptionType;
+  placeholder: string;
+  value: string;
+  shortcutKey: string;
+};

 const searchOptions = [
   {
     key: "phone_number",
-    label: "Phone Number",
+    label: t("phone_number"),
     type: "phone" as const,
     placeholder: "Search_by_phone_number",
     value: qParams.phone_number || "",
     shortcutKey: "p",
   },
   // ... rest of the options with similar changes
 ] as const;

---

190-195: Consider using useDebounce hook for better reusability.

The current debouncing implementation could be improved using a custom hook or the useDebounce hook from a library like use-debounce.

-const [debouncedSearchParams, setDebouncedSearchParams] = useState(params);
-
-useEffect(() => {
-  const timeout = setTimeout(() => setDebouncedSearchParams(params), 1000);
-  return () => clearTimeout(timeout);
-}, [params]);
+import { useDebounce } from 'use-debounce';
+
+const [debouncedSearchParams] = useDebounce(params, 1000);

Configuration used: CodeRabbit UI
Review profile: CHILL

+type SearchKey = 'phone_number' | 'name' | 'patient_no' | 'emergency_phone_number';
+
+const isValidPhoneNumber = (value: string) => {
+  const phoneRegex = /^\+?[\d\s-]{10,15}$/;
+  return value === '' || phoneRegex.test(value);
+};
+
 const handleSearch = useCallback(
-  (key: string, value: string) => {
+  (key: SearchKey, value: string) => {
     const updatedQuery = {
-      phone_number:
-        key === "phone_number"
-          ? value.length >= 13 || value === ""
-            ? value
-            : undefined
-          : undefined,
+      phone_number: key === "phone_number" && isValidPhoneNumber(value) ? value : undefined,
       name: key === "name" ? value : undefined,
       patient_no: key === "patient_no" ? value : undefined,
-      emergency_phone_number:
-        key === "emergency_phone_number"
-          ? value.length >= 13 || value === ""
-            ? value
-            : undefined
-          : undefined,
+      emergency_phone_number: key === "emergency_phone_number" && isValidPhoneNumber(value) ? value : undefined,
     };

     updateQuery(updatedQuery);
   },
   [updateQuery],
 );

clearSearch?: { value: boolean; params?: string[] }

#!/bin/bash
# Description: Verify SearchByMultipleFields component implementation
# Test: Check if the component exists and has the expected props interface

# Look for the component definition
ast-grep --pattern 'interface $SearchProps {
  $$$
  options: $_;
  onSearch: $_;
  clearSearch?: $_;
  $$$
}'

#!/bin/bash
# Let's try a broader search for the SearchByMultipleFields component and its interface
# First, find the file containing the component
fd "SearchByMultipleFields" --type f

# Then let's look for any interface or type definition related to this component
rg -A 5 "interface.*Props.*{|type.*Props.*=" --type ts --type tsx

#!/bin/bash
# Now that we found the component file, let's examine its contents
cat src/components/Common/SearchByMultipleFields.tsx

# Also search for interface definitions with fixed regex
rg "interface.*Props" --type ts --type tsx

src/components/Common/SearchByMultipleFields.tsx (2)

73-73: Improve error state type definition

The error state type is ambiguous with string | undefined | boolean. Consider using a more specific type:

-const [error, setError] = useState<string | undefined | boolean>();
+type ValidationError = { message: string; field: string } | null;
+const [error, setError] = useState<ValidationError>(null);

---

199-205: Enhance accessibility attributes

Add more descriptive ARIA attributes:

 <div
   role="searchbox"
   aria-expanded={open}
   aria-controls="search-options"
   aria-haspopup="listbox"
+  aria-label={t('search_by_multiple_fields')}
+  aria-describedby={error ? 'search-error' : undefined}
   className="flex items-center rounded-t-lg"
 >

Configuration used: CodeRabbit UI
Review profile: CHILL

-component?: React.ComponentType<HTMLDivElement>;
+component?: React.ComponentType<{ className?: string }>;

-type EventType = {
-  value: string;
-  target?: { value: string };
-};
+import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";

// Usage:
// For regular inputs: React.ChangeEvent<HTMLInputElement>
// For phone input: FieldChangeEvent<string>

 {error && (
   <div className="error-text px-2 mb-1 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
-    {t("invalid_phone_number")}
+    {t(error.message)}
   </div>
 )}